 <template>
  <!-- 确认收货 -->
  <div id="container">
    <el-collapse v-model="activeNames" v-loading="loading">
      <el-collapse-item title="订单信息" name="1">
        <base-info ref="detail" :data="purchaseDetail"></base-info>
      </el-collapse-item>
      <el-collapse-item title="待收货" name="2">
        <pending-arrival :data="purchaseDetail"></pending-arrival>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
import BaseInfo from './components/baseInfo.vue'
import pendingArrival from './components/pendingArrival.vue'

export default {
  name: 'detail',
  data () {
    return {
      activeNames: ['1', '2'],
      loading: false,
      purchaseDetail: {},

    }
  },
  components: {
    pendingArrival,
    BaseInfo
  },
  mounted () {
    this.getDetail()
  },
  methods: {
    async getDetail () {
      let param = {
        limit: 1000,
        page: 1,
        id: this.$route.query.id
      }
      this.loading = true
      let { data } = await this.$API.purchase.getPurchaseList.get(param)
      this.loading = false
      this.purchaseDetail = data[0]
      let list = data[0].procurementProductList
      list.map(item => {
        item.actualNum = item.financeBuyNum
      })
      this.purchaseDetail.procurementProductList = list

    },
  }
}
</script>
<style lang='scss' scoped>
#container {
  margin: 10px;
  :deep(.el-collapse-item__header) {
    padding-left: 20px;
    font-size: 16px;
  }
  :deep(.el-collapse-item__content) {
    padding: 0 20px 20px 20px;
  }
  :deep(.el-form-item) {
    margin-bottom: 5px;
  }
  :deep(.el-form-item__label) {
    color: #999;
  }
}
</style>